<template>
	<view>
		<vxe-grid ref="xGrid" class="my-grid66" v-bind="gridOptions" @checkbox-change="checkboxChangeEvent" @checkbox-all="checkboxChangeEvent">
			<template #name_header>
				<view class="first-col">
					<vxe-column type="checkbox" title="栏目" width="280" tree-node></vxe-column>
				</view>
			</template>
			<template #doIt="{ row }">
				<view class="" v-if="row.caozuo == 0">
					<vxe-button type="text" @click="addLine(row, 'current')">新增栏目</vxe-button>
					<vxe-button type="text" @click="addLine(row, 'bottom')">新增页面</vxe-button>
				</view>
				<view class="" v-if="row.caozuo == 1">
					<vxe-button type="text" @click="addLine(row, 'bottom')">添加</vxe-button>
					<vxe-button type="text">跟进</vxe-button>
					<vxe-button type="text">转交</vxe-button>
					<vxe-button type="text">协同</vxe-button>
					<vxe-button type="text">完成</vxe-button>
				</view>
				<view class="" v-if="row.caozuo == 2">
					<vxe-button type="text" @click="addLine(row, 'bottom')">回答</vxe-button>
				</view>
				<view class="" v-if="row.caozuo == 3">
					<vxe-button type="text" @click="addLine(row, 'current')">回答</vxe-button>
				</view>
			</template>
		</vxe-grid>
	</view>
</template>

<script lang="jsx" setup>
import { reactive, ref } from 'vue';
import { VXETable } from 'vxe-table';
const xGrid = ref();
const demo1 = reactive({
	isAllChecked: false,
	isIndeterminate: false,
	selectRecords: [],
	tablePage: {
		totalResult: 8,
		currentPage: 1,
		pageSize: 10
	}
});
const gridOptions = reactive({
	border: true,
	height: 600,
	columnConfig: {
		resizable: true
	},
	editConfig: {
		trigger: 'click',
		mode: 'cell'
	},
	treeConfig: {
		transform: true,
		rowField: 'id',
		parentField: 'parentId'
	},
	data: [
		{ id: '栏目名字', parentId: null, caozuo: 0 },
		{ id: '页面名字', parentId: '栏目名字', caozuo: 0 },
		{ id: '位置名', parentId: '页面名字', caozuo: 1, fman: '发起人', gman: '我', state: '已完成' },
		{ id: '问题1', parentId: '位置名', caozuo: 2, fman: '发起人' },
		{ id: '回答1', parentId: '问题1', caozuo: 3, fman: '发起人', gman: '回答' },
		{ id: '问题2', parentId: '位置名', fman: '发起人', caozuo: 2 }
	],
	columns: [
		{ field: 'lanname', title: '栏目名字', width: 200, resizable: false, slots: { default: 'name_header' } },
		{ field: 'caozuo', title: '操作', width: 100, slots: { default: 'doIt' } },
		{ field: 'fman', title: '发起人', width: 100 },
		{ field: 'gman', title: '跟进人', width: 100 },
		{ field: 'state', title: '状态', width: 100 }
	]
});

//全选
const checkboxChangeEvent = () => {
	const $grid = xGrid.value;
	if ($grid) {
		demo1.isAllChecked = $grid.isAllCheckboxChecked();
		demo1.isIndeterminate = $grid.isAllCheckboxIndeterminate();
		demo1.selectRecords = $grid.getCheckboxRecords();
	}
};
</script>

<style></style>
